<template>
    <view>
        <view class="header">
            <view class="box_1">
                <view>{{ all_count }}</view>
                <view>总车数</view>
            </view>
            <view class="box_2">
                <view>{{ transport_mileage_count }}</view>
                <view>总里程数</view>
            </view>
            <view class="box_3">
                <view>{{ tonnage_cube_count }}</view>
                <view>总立方数/吨数</view>
            </view>
        </view>
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
            <view class="item" v-for="(item, index) in list" :key="index">
                <view class="info">
                    <view>车牌:<text>{{ item.vihicle_number }}</text></view>
                    <view>车牌类型: <text>{{ item.is_save == 1 ? '入库车牌' : '临时车牌' }}</text></view>
                </view>
                <view class="info">
                    <view>运输材料:<text>{{ item.transport_details }}</text></view>
                    <view>运输线路: <text>{{ item.transit_lines }}</text></view>
                </view>
                <view class="info">
                    <view>吨位/立方:<text>{{ item.tonnage_cube }}</text></view>
                    <view>运输里程: <text>{{ item.transport_mileage }}</text></view>
                </view>
                <view class="info">
                    <view>当前状态:<text>{{ item.state == 1 ? '单次完成' : item.state == 2 ? '装车完成' : '卸车完成' }}</text>
                    </view>
                </view>
                <view class="image" v-if="item.image != ''">
                    <image :src="item.image" mode="scaleToFill" />
                </view>
                <view class="btn" v-if="false">

                    <view>编辑</view>
                    <view>删除</view>
                </view>
            </view>
        </scroll-view>
        <view class="search" @click="show = true">
            <u-icon name="search" size="30" color="#fff"></u-icon>
        </view>
        <u-popup :show="show" :round="10">
            <!-- <view class="selectItem">
                <view>设备:</view>
                <view @click="facilityChange">{{ facilityText }}</view>
            </view> -->
            <!-- <view class="selectItem">
                <view>车牌号:</view>
                <view @click="cartChange">{{ selectCartText }}</view>
            </view> -->
            <!-- <view class="selectItem">
                <view>车牌类型:</view>
                <view @click="cartTypeChange">{{ selectCartTypeText }}</view>
            </view> -->
            <!-- <view class="selectItem">
                <view>工作模式:</view>
                <view @click="selectProfessionalType">{{ selectProfessionalText }}</view>
            </view> -->
            <view class="selectItem">
                <view>日期范围:</view>
                <view @click="timeShowFun">{{ timeText }}</view>
            </view>

            <view class="btns" @click="submit">搜索</view>
            <view style="width: 100%;height: 30rpx;"></view>
        </u-popup>
        <u-overlay :show="facilityShow">
            <view class="warp">
                <view class="selectList">
                    <view class="item" v-for="(item, index) in facilityListInfo" :key="index"
                        @click="selectFacility(item)">
                        {{ item.facility_name }}</view>
                </view>
            </view>
        </u-overlay>
        <u-overlay :show="cartShow">
            <view class="warp">
                <view class="selectList">
                    <view class="item" v-for="(item, index) in cartList" :key="index" @click="selectCart(item.number)">
                        {{ item.number }}</view>
                </view>
            </view>
        </u-overlay>
        <u-overlay :show="cartTypeShow">
            <view class="warp">
                <view class="selectList">
                    <view class="item" v-for="(item, index) in cartTypeList" :key="index" @click="selectCartType(item)">
                        {{ item.name }}</view>
                </view>
            </view>
        </u-overlay>
        <u-overlay :show="ProfessionalTypeShow">
            <view class="warp">
                <view class="selectList">
                    <view class="item" v-for="(item, index) in professionalList" :key="index"
                        @click="selectProfessionalTypeFun(item)">
                        {{ item.name }}</view>
                </view>
            </view>
        </u-overlay>
        <term-picker :visable.sync="timeShow" :minYear="2020" :timeLimit="false" :deferYear="20" themeColor="#007aff"
            startText="开始时间" endText="结束时间" @confirm="confirm">
        </term-picker>
    </view>
</template>

<script>
import termPicker from '@/components/term-picker/term-picker.vue'
import { vihiclelist, getTotalInfo, facilityactionlist, facilityList } from "@/api/user.js"
export default {
    components: {
        termPicker
    },
    props: {},
    data() {
        return {
            show: false,
            cartList: [],
            facilityShow: false,
            cartShow: false,
            cartTypeShow: false,
            ProfessionalTypeShow: false,
            timeShow: false,
            cartTypeList: [{
                name: '临时车牌',
                id: 2
            }, {
                name: '入库车牌',
                id: 1
            }],
            professionalList: [{
                name: '单次完成',
                id: 1
            }, {
                name: '装车模式',
                id: 2
            }, {
                name: '卸货模式',
                id: 2
            }],
            facilityText: '选择设备',
            selectCartText: '选择车牌号',
            selectCartTypeText: '选择车牌类型',
            selectProfessionalText: '选择工作模式',
            timeText: '选择日期',
            tonnage_cube_count: 0,
            transport_mileage_count: 0,
            all_count: 0,
            list: [],
            facilityListInfo: [],
            info: {
                page: 1,
                pageSize: 10,
                is_save: '',
                state: '',
                vihicle_number: '',
                time_interval: '',
                facility_number: ''
            }
        };
    },
    watch: {},
    methods: {
        getCartList() {
            vihiclelist({
                page: 1,
                pageSize: 100
            }).then(res => {
                this.cartList = res.data
            })
        },
        facilityChange() {
            this.facilityShow = !this.facilityShow
            this.show = false;
        },
        getFacilityList() {
            facilityList({
                page: 1,
                pageSize: 100
            }).then(res => {
                this.facilityListInfo = res.data
            })
        },
        cartChange() {
            this.cartShow = !this.cartShow
            this.show = false;
        },
        cartTypeChange() {
            this.cartTypeShow = !this.cartTypeShow
            this.show = false;
        },
        selectCart(number) {
            this.selectCartText = number;
            this.info.vihicle_number = number;
            this.cartShow = !this.cartShow
            this.show = true;
        },
        selectCartType(item) {
            this.info.is_save = item.id;
            this.selectCartTypeText = item.name;
            this.cartTypeShow = !this.cartTypeShow
            this.show = true;
        },
        selectProfessionalType() {
            this.ProfessionalTypeShow = !this.ProfessionalTypeShow
            this.show = false;
        },
        selectProfessionalTypeFun(item) {
            this.selectProfessionalText = item.name;
            this.info.state = item.id;
            this.ProfessionalTypeShow = false;
            this.show = true;
        },
        timeShowFun() {
            this.timeShow = !this.timeShow
            this.show = false;
        },
        confirm(date) {
            console.log(date)
            this.time_interval = date[0] + '~' + date[1];
            this.timeText = date[0] + '~' + date[1];
            this.show = true;
        },
        getTotalInfo() {
            getTotalInfo(this.info).then(res => {
                console.log(res)
                this.tonnage_cube_count = res.data.tonnage_cube_count;
                this.all_count = res.data.all_count;
                this.transport_mileage_count = res.data.transport_mileage_count
            })
        },
        getList() {
            facilityactionlist(this.info).then(res => {
                console.log(res)
                if (this.page == 1) {
                    this.list = res.data;
                } else {
                    this.list = this.list.concat(res.data);
                }
            })
        },
        scrolltolower() {
            this.info.page++;
            this.getList()
        },
        selectFacility(item) {
            this.facilityText = item.facility_name;
            this.info.facility_number = item.facility_number;
            this.facilityShow = false;
            this.show = true;
        },
        submit() {
            this.show = false;
            this.list = []
            this.getTotalInfo()
            this.getList()
        }
    },
    onShow() { },
    onLoad(option) {
        console.log(option)
        this.info.facility_number = option.id;
        this.getCartList()
        this.getTotalInfo()
        this.getList()
        this.getFacilityList()
    },
};
</script>
<style scoped lang='scss'>
.header {
    width: 100%;
    height: 220rpx;
    display: flex;

    .box_1 {
        width: 32%;
        height: 180rpx;
        margin: auto;
        background-color: $uni-color-primary;
        border-radius: 20rpx;
        color: #fff;
        text-align: center;

        view:nth-child(1) {
            height: 90rpx;
            line-height: 90rpx;
            font-size: 44rpx;
        }
    }

    .box_2 {
        width: 32%;
        height: 180rpx;
        margin: auto;
        background-color: $uni-color-primary;
        border-radius: 20rpx;
        color: #fff;
        text-align: center;

        view:nth-child(1) {
            height: 90rpx;
            line-height: 90rpx;
            font-size: 44rpx;
        }
    }

    .box_3 {
        width: 32%;
        height: 180rpx;
        margin: auto;
        background-color: $uni-color-primary;
        border-radius: 20rpx;
        color: #fff;
        text-align: center;

        view:nth-child(1) {
            height: 90rpx;
            line-height: 90rpx;
            font-size: 44rpx;
        }
    }
}

.scroll-Y {
    width: 98%;
    margin: auto;
    // background-color: red;
    height: 84vh;

    .item {
        width: 100%;
        margin: auto;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
        border-radius: 12px 12px 12px 12px;
        margin-top: 30rpx;
        min-height: 440rpx;

        .info {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;

            view {
                width: 50%;

                text {
                    color: $uni-color-primary;
                }
            }

            view:nth-child(1) {
                padding-left: 30rpx;
            }

            view:nth-child(2) {
                padding-right: 30rpx;
                text-align: right;
            }

            // padding-left: 30rpx;
        }

        .image {
            width: 100%;
            height: 440rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .btn {
            display: flex;
            padding-left: 30rpx;

            view {
                width: 45%;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                margin: auto;
                border-radius: 20rpx;
                color: #fff;
            }

            view:nth-child(1) {
                background-color: $uni-color-primary;
            }

            view:nth-child(2) {
                background-color: red;
            }
        }
    }
}

.search {
    width: 60rpx;
    height: 60rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    position: fixed;
    right: 30rpx;
    bottom: 120rpx;
}

.selectItem {
    width: 94vw;
    height: 100rpx;
    display: flex;
    line-height: 100rpx;
    border-bottom: 1px solid #efefef;
    font-size: 26rpx;

    view {
        width: 50%;
    }

    view:nth-child(1) {
        padding-left: 30rpx;
    }

    view:nth-child(2) {
        padding-right: 30rpx;
        text-align: right;
    }
}

.btns {
    width: 94%;
    height: 80rpx;
    background-color: $uni-color-primary;
    margin: auto;
    margin-top: 30rpx;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
    border-radius: 50rpx;
}

.selectList {
    width: 100%;
    min-height: 500rpx;
    background-color: #fff;
    z-index: 9999999;
    position: fixed;
    bottom: 0;

    .item {
        width: 100%;
        height: 100rpx;
        border-bottom: 1px solid #efefef;
        text-align: center;
        line-height: 100rpx;
    }
}
</style>